<template>
    <div class="index">
        <!-- 侧边栏 -->
        <div class="side-bar">
            <m-sidebar :navData="navData" v-if="canMounted"></m-sidebar>
        </div>
        <!-- 主体内容 -->
        <div class="main-content">
            <div class="top-bar">
                <div class="title">中台管理系统</div>
                <div class="top-nav">
                    <el-badge :value="200" :max="99" type="danger">
                        <el-button icon="el-icon-bell" circle></el-button>
                    </el-badge>
                    <div class="user-info">
                        <div class="logo-con">
                            <img src="../../../static/images/logo.jpg" alt="">
                        </div>
                        <div class="name">
                            梁韶峰
                        </div>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="loginOut">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="time-info">
                            <div id="time" style="margin-top: 10px;">{{timeText}}</div>
                            <div id="year">{{dateText}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-view">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import { getNavList } from "@/common/js/nav.js";
import mSidebar from "@/components/m-sidebar/index.vue";
export default {
    name: "index",
    data() {
        return {
            // 顶部时间
            timeText: "",
            dateText: "",
            //导航数据
            navData: {
                navList: [],
                navLevelFirst: 1,
                navLevelFirstIndex: 0,
                navLevelSecond: 11,
                completeName: ""
            },
            canMounted: false
        };
    },
    mounted() {
        getNavList().then(res => {
            this.navData.navList = res.navList;
            this.initNav(this.$route);
            this.canMounted = true;
        });
    },
    created() {
        //初始化时间
        this._getTime();
    },
    methods: {
        // 退出登录
        loginOut() {
            localStorage.removeItem("Flag");
            this.$router.push("/login");
        },

        //导航数据
        initNav(val) {
            let navInfo = this.navData.navList.find((x, index) => {
                if (!x) {
                    return false;
                }
                let hasMatch = x.child.find(y => {
                    if (val.path == y.link) {
                        return y;
                    }
                });
                if (hasMatch) {
                    this.navData.navLevelFirst = hasMatch.pid;
                    this.navData.navLevelSecond = hasMatch.id;
                    this.navData.navLevelFirstIndex = index;
                    return true;
                }
                return false;
            });
            if (navInfo) {
                this.navData.completeName = navInfo.completeName;
            }
        },

        //顶部时间
        _getTime() {
            var timeInfo = this.UTILS.getCurrentTime();
            this.timeText = timeInfo.timeText;
            this.dateText = timeInfo.dateText;
            setInterval(() => {
                var timeInfo = this.UTILS.getCurrentTime();
                this.timeText = timeInfo.timeText;
                this.dateText = timeInfo.dateText;
            }, 1000);
        }
    },
    watch: {
        $route: function(val) {
            this.initNav(val);
            if (this.navData.navList.length == 1) {
                getNavList().then(res => {
                    this.navData.navList = res.navList;
                    this.initNav(this.$route);
                    this.canMounted = true;
                });
            }
        }
    },
    components: {
        "m-sidebar": mSidebar
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
.index {
    display: flex;
    height: 100vh;
    .side-bar {
        height: 100%;
        border-right: 1px solid #e6e6e6;
        box-sizing: border-box;
    }
    .main-content {
        flex: 1;
        height: 100%;
        background: #f0f0f0;
        overflow: hidden;
        .top-bar {
            width: 100%;
            height: 60px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #e6e6e6;
            box-sizing: border-box;
            .title {
                height: 60px;
                line-height: 60px;
                margin-left: 10px;
                color: #333;
                font-size: 24px;
            }
            .top-nav {
                display: flex;
                align-items: center;
                .user-info {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 40px;
                    .logo-con {
                        width: 44px;
                        height: 44px;
                        border-radius: 50%;
                        overflow: hidden;
                        img {
                            width: 100%;
                        }
                    }
                    .name {
                        font-size: 14px;
                        color: #333;
                        margin: 0 10px;
                    }
                    .time-info {
                        font-size: 14px;
                        color: #333;
                        text-align: center;
                        margin: 0 20px;
                        height: 60px;
                        overflow: hidden;
                    }
                }
            }
        }
        .main-view {
            height: calc(100vh - 60px);
            overflow: auto;
        }
    }
}
</style>